<script lang="ts" setup>
import type {
  TablistAppearance,
  TablistOrientation,
  TablistSize,
} from '@fluentui/web-components';

withDefaults(
  defineProps<{
    activeid?: string;
    appearance?: TablistAppearance;
    disabled?: boolean;
    orientation?: TablistOrientation;
    size?: TablistSize;
  }>(),
  {
    appearance: 'transparent',
    orientation: 'horizontal',
    activeid: undefined,
    disabled: false,
    size: 'medium',
  },
);

const emit = defineEmits<{
  change: [activeTab: HTMLElement];
}>();
</script>

<template>
  <fluent-tablist
    :appearance="appearance"
    :orientation="orientation"
    :activeid="activeid"
    :disabled="disabled"
    :size="size"
    @change="emit('change', $event.detail)"
  >
    <slot></slot>
  </fluent-tablist>
</template>

<style scoped></style>
